import React from 'react';
import { Icon } from 'choerodon-ui';
import styles from './style.less';
import MiniArea from './MiniArea';


const CoreCircle = (props) => {
  const { name, unit, number, status, bizData, percent, borderColor, color } = props;
  return (
    <div className={styles['core-circle']}>
      <div className={styles.title}>{name} ({unit})</div>
      <div className={styles['top-detail']}>
        <div className={styles['detail-left']}>{number}</div>
        <div className={styles['detail-right']}>
          {
            status === 'up' ? (
              <div className={styles['right-number']} style={{ color: '#39C878' }}>
                <Icon type="arrow_drop_up" style={{ color: '#39C878', transform: 'scale(1.4)' }} /> {percent}%
              </div>
            ) : (
              <div className={styles['right-number']} style={{ color: '#FD6868' }}>
                <Icon type="arrow_drop_down" style={{ color: '#FD6868', transform: 'scale(1.4)' }} /> {percent}%
              </div>
              )
          }
          <div className={styles.desc}>同比上周</div>

        </div>
      </div>
      <MiniArea line height={120} data={bizData} borderColor={borderColor} color={color} />
    </div>
  );
}

export default CoreCircle;
